<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="webuploader.css">
    <!--引入JS-->
    <script src="jquery.js"></script>
    <script src="webuploader.js"></script>
    <script type="text/javascript">
        $(function() {
            //开始上传按钮
            var $btn = $('#ctlBtn');
            //文件信息显示区域
            var $list = $('#list');
            //当前状态
            var state = 'pending';
            //初始化Web Uploader
            var uploader = WebUploader.create({
                auto: false, // 选完文件后，是否自动上传
                swf: 'Uploader.swf', // swf文件路径
                server: 'http://localhost:8002/largeFile/upload', // 文件接收服务端
                dnd: '#upload-container',//拖拽的文本区域
                pick: '#picker', // 选择文件的按钮。
                multiple: true, //选择多个
                chunked: true, // 开始分片上传
                duplicate: true,//是否允许重复的图片
                threads: 30, //上传并发数，允许同时最大上传进程数。
                method: 'POST',//文件上传方式，post 或者 get。
                fileSingleSizeLimit: 10*1024*1024*1024,//验证单个文件大小是否超出限制，超出则不允许加入队列
                fileSizeLimit: 1024*1024*1024*100, //验证文件总大小是否超出限制，超出则不允许加入队列
                fileNumLimit: 100,//上传文件数量限制
                fileVal:'uploadFile',// 设置文件上传域的name ,默认 ’file‘。
                // 只允许选择图片文件。
                /*accept: {
                    title: 'Images',
                    extensions: 'gif,jpg,jpeg,bmp,png',
                    mimeTypes: 'image/!*'
                },*/
                compress: false,//上传前不压缩
            });

            // 文件进入队列之前后触发事件。
            uploader.on("beforeFileQueued",function (file) {
                console.log(file)
            })

            // 当有文件被添加进队列的时候（选择文件后调用）
            uploader.on( 'fileQueued', function( file ) {
                $list.append( '<div id="' + file.id + '" class="item">' +
                    '<h4 class="info">' + file.name + '</h4>' +
                    '<p class="state">等待上传...</p>' +
                    '</div>' );
                /*var html = '<div class="upload-item"> <span>文件名：' + file.name + '</span><span data-file_id="' + file.id + '" class="btn-delete">删除</span><span data-file_id="' + file.id + '" class="btn-retry">重试</span><div class="percentage' + file.id + '" style="width: 0%;"></div></div>';
                $list.append(html);*/
                uploader.md5File(file) //大文件秒传：文件都有一个唯一的md5值，再进行文件上传时，有如果服务端已经存在这个文件了，就不需要上传了
                    //及时显示进度，如果文件大的话。
                    .progress(function (percentage) {
                        console.log('Percentage:',percentage);
                    })
                    // 完成
                    .then(function (val) {
                        console.log('md5 result:',val)
                    });

            });

            // 文件上传过程中创建进度条实时显示。
            uploader.on( 'uploadProgress', function( file, percentage ) {
                var $li = $( '#'+file.id );
                $li.find('p.state').text('上传中（' + parseInt(percentage * 100) + '%）');
            });

            // 文件上传成功后会调用 (每个文件上传成功都会触发)
            uploader.on( 'uploadSuccess', function( file ) {
                $( '#'+file.id ).find('p.state').text('已上传');
                //savefilemanager("/vod/uploadfilemanager/"+file.name,file.name);
            });

            // 文件上传失败后会调用
            uploader.on( 'uploadError', function( file ) {
                $( '#'+file.id ).find('p.state').text('上传出错');
            });

            // 文件上传完毕后会调用（不管成功还是失败，）
            uploader.on( 'uploadComplete', function( file ) {
                $( '#'+file.id ).find('.progress').fadeOut();
            });

            // all事件（所有的事件触发都会响应到）
            uploader.on( 'all', function( type ) {
                if ( type === 'startUpload' ) {
                    state = 'uploading';
                } else if ( type === 'stopUpload' ) {
                    state = 'paused';
                } else if ( type === 'uploadFinished' ) {
                    state = 'done';
                }

                if ( state === 'uploading' ) {
                    $btn.text('暂停上传');
                } else {
                    $btn.text('开始上传');
                }
            });

            // 开始上传按钮点击事件响应
            $btn.on( 'click', function() {
                if ( state === 'uploading' ) {
                    uploader.stop();
                } else {
                    uploader.upload();
                }
            });
        });
    </script>
    <style>
        #picker {
            display: inline-block;
        }
        #ctlBtn {
            position: relative;
            display: inline-block;
            cursor: pointer;
            background: #EFEFEF;
            padding: 10px 15px;
            color: #2E2E2E;
            text-align: center;
            border-radius: 3px;
            overflow: hidden;
        }
        #ctlBtn:hover {
            background: #DDDDDD;
        }
    </style>
    <style>
        #picker {
            display: inline-block;
        }
        #ctlBtn {
            position: relative;
            display: inline-block;
            cursor: pointer;
            background: #EFEFEF;
            padding: 10px 15px;
            color: #2E2E2E;
            text-align: center;
            border-radius: 3px;
            overflow: hidden;
        }
        #ctlBtn:hover {
            background: #DDDDDD;
        }
        #upload-container{
            height: 150px;
        }
        .btns,#uploader,#upload-container{
            border: 1px solid #EEE;
            margin: 0 auto;
            width: 400px;
        }
    </style>
</head>
<body>
<div id="uploader" class="wu-example">
    <div id="upload-container">
        <span>点击或将文件拖拽至此上传</span>
    </div>
    <div class="btns">
        <div id="picker">选择文件</div>
        <div id="ctlBtn" class="webuploader-upload">开始上传</div>
    </div>
    <!--用来存放文件信息-->
    <div id="list" class="uploader-list"></div>
</div>
</body>
</html>
